<template>
  <div>
  <el-descriptions title="账户管理" direction="vertical" :column="4" border v-loading="loading">
  <el-descriptions-item label="绑定邮箱">{{email}}</el-descriptions-item>
  <el-descriptions-item label="修改绑定邮箱"><el-button  type="warning" @click="dialogVisible = true" >修改邮箱</el-button>
    <el-dialog title="修改绑定邮箱" :visible.sync="dialogVisible">
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="换绑邮箱" label-width="80px" prop="email">
      <el-input v-model="form.email" autocomplete="off" placeholder="请输入要更改的邮箱"></el-input>
    </el-form-item>
    <el-form-item label="密码" label-width="80px" prop="password">
      <el-input v-model="form.password" autocomplete="off" placeholder="请输入原始账号的密码"></el-input>
    </el-form-item>
    <el-form-item label="验证码" label-width="80px" prop="yanzhengma">
      <el-input v-model="form.yanzhengma" autocomplete="off"></el-input>
      <el-link type="primary" :underline="false" style="font-family: 'ZCOOLKuaiLe-Regular'" :plain="true" @click="sendCode1(form.email)" :disabled="disabled">发送验证码(10s冷却时间)</el-link>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitForm('form')">确 定</el-button>
  </div>
</el-dialog>
  </el-descriptions-item>
  <el-descriptions-item label="会员状态">
    <el-tag size="small" v-show="isvip" type="success">会员</el-tag>
    <el-tag type="danger" size="small" v-show="!isvip">非会员</el-tag>
  </el-descriptions-item>
  <el-descriptions-item label="上次登录时间">{{loginTime}}</el-descriptions-item>
  <el-descriptions-item :label="space">
    <el-progress type="circle" :percentage="usespace-0" :status="spacestatus"/>
  </el-descriptions-item>
  <el-descriptions-item label="账号退出">
    <el-button @click="loginout" type="danger">退出账户</el-button>
  </el-descriptions-item>
  <el-descriptions-item label="修改密码"><el-button  type="warning" @click="dialogVisiblepa = true" >修改密码</el-button>
    <el-dialog title="修改密码" :visible.sync="dialogVisiblepa">
  <el-form :model="paform" :rules="parules" ref="paform">
    <el-form-item label="输入密码" label-width="80px" prop="pass">
      <el-input v-model="paform.pass" autocomplete="off" placeholder="请输入要修改的密码"></el-input>
    </el-form-item>
    <el-form-item label="再次输入" label-width="80px" prop="repass">
      <el-input v-model="paform.repass" autocomplete="off" placeholder="再次输入要修改的密码"></el-input>
    </el-form-item>
    <el-form-item label="验证码" label-width="80px" prop="yanzhengma">
      <el-input v-model="paform.yanzhengma" autocomplete="off"></el-input>
      <el-link type="primary" :underline="false" style="font-family: 'ZCOOLKuaiLe-Regular'" :plain="true" @click="sendCode(email)" :disabled="disabled">发送验证码(10s冷却时间)</el-link>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogVisiblepa = false">取 消</el-button>
    <el-button type="primary" @click="submitFormpa('paform')">确 定</el-button>
  </div>
</el-dialog>
  </el-descriptions-item>
  </el-descriptions>
</div>
</template>
<script>
 import axios from 'axios'
export default {
    data(){
      var checkEmail = (rule,value,cb) => {
        const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
        if(regEmail.test(value)){
          //合法的邮箱
          return cb();
        }
        //邮箱不合法
        cb(new Error('请输入合法的邮箱！'));
	};
  var checkPass =  (rule,value,cb) => {
        const regPass = /^[a-zA-Z]\w{5,17}/;
        if(regPass.test(value)){
          //合法的邮箱
          return cb();
        }
        //邮箱不合法
        cb(new Error('请输入以字母开头，长度在6-18之间，只能包含字符、数字和下划线的密码'));
	};
  var validatePass = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请再次输入密码'));
          } else if (value !== this.paform.pass) {
            callback(new Error('两次输入密码不一致!'));
          } else {
            callback();
          }
        };
      return{
        sendemail:'',
        loading:true,
        email:'',
        space:'',
        usespace:0,
        spacestatus:'success',
        isvip:false,
        loginTime:'',
        dialogVisible:false,
        dialogVisiblepa:false,
        disabled:false,
        form: {
          email: '',
          yanzhengma:'',
          password:'',
        },
        paform:{
          pass:'',
          repass:'',
          yanzhengma:""
        },
        rules: {
            email: [
              { validator: checkEmail, trigger: 'blur',required: true }
            ],
            password:[
            { validator: checkPass, trigger: 'blur',required: true }
            ],
            yanzhengma: [
            {required: true, message: '请输入验证码', trigger: 'blur'},
            ]
          },
          parules: {
            pass: [
              {required: true, validator: checkPass, trigger: 'blur'}
            ],
            repass: [
              {required: true,validator: validatePass, trigger: 'blur'}
            ],
            yanzhengma: [
            {required: true, message: '请输入验证码', trigger: 'blur'},
            ]
          },
      };
    },
    computed:{
    },
    mounted(){
      axios.get(`/api/getInfo?email=${localStorage.getItem("email")}`).then(
      response=>{
        if(response.data.code==200){
          this.email=response.data.data.userInfo.email;
          this.loading = false
          this.isvip = response.data.data.userInfo.isvip
          this.usespace = ((response.data.data.userInfo.totalSpace-response.data.data.userInfo.useSpace)/response.data.data.userInfo.totalSpace*100).toFixed(2)
          this.loginTime = response.data.data.userInfo.lastLoginTime
          if(this.usespace<80&this.usespace>=50){
            this.spacestatus='warning'
          }else if(this.usespace<50){
            this.spacestatus='exception'
          }
          var util = 1024*1024
          this.space = '账户可用空间: '+((response.data.data.userInfo.totalSpace-response.data.data.userInfo.useSpace)/util).toFixed(2)+' MB'
        }else{
          this.$message.error("显示失败");
        }
      },
      error=>{
        this.$message.error("显示失败");
        console.log(error.$message)
      }
    )
    },
    methods:{
      loginout(){
        axios.get(`/api/loginout?email=${this.email}`).then(
          response=>{
            localStorage.clear("nickname")
            localStorage.clear("email")
            this.$router.push('/')
            this.$message({
                message: "退出"+response.data.data+"!返回登录页面",
                type: 'success'
                 })
          },
          error=>{
            this.$message.error(error.message);
          }
        )
        },
        sendCode(a){
          this.disabled = true
          this.sendemail = a
          axios.post(`/api/sendemailUpPass?email=${this.sendemail}`).then(
            response=>{
              if(response.data.code=== 200){              
                this.$message({
                message: "发送验证码"+response.data.message+"!请在3分钟内提交哦",
                type: 'success'
                 })
               }else{
                this.$message.error(response.data.message);
                }
            },
            error=>{
              this.$message.error(error.message);
            }
          )
          setTimeout(()=>{
                this.disabled = false
            },10000)
        },
        sendCode1(a){
          this.disabled = true
          this.sendemail = a
          axios.post(`/api/sendemailUp?email=${this.sendemail}`).then(
            response=>{
              if(response.data.code=== 200){              
                this.$message({
                message: "发送验证码"+response.data.message+"!请在3分钟内提交哦",
                type: 'success'
                 })
               }else{
                this.$message.error(response.data.message);
                }
            },
            error=>{
              this.$message.error(error.message);
            }
          )
          setTimeout(()=>{
                this.disabled = false
            },10000)
        },
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.form.email===this.email){
              this.dialogVisible = false
            this.$message.error("该邮箱已被绑定!");
            }else{
              axios.get(`/api/updateEmail?oldemail=${this.email}&newemail=${this.form.email}&code=${this.form.yanzhengma}&password=${this.form.password}`).then(
            response=>{
              if(response.data.code===200){
                this.email = this.form.email;
                localStorage.setItem("email",this.email)
                this.dialogVisible = false 
                this.$message({
                type: 'success',
                message: '邮箱修改成功',
                });

              }else{
                this.$message.error(response.data.message);
              }
            },
            error=>{
              this.$message.error("修改邮箱失败");
              console.log(error.$message)
            }
          )                   
            }           
          }
          else {
            this.$message.error("邮箱换绑失败");
          }
        });
      },

      submitFormpa(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            axios.Get(`/api/updatePass?email=${this.email}&password=${this.paform.pass}&code=${this.paform.yanzhengma}`).then(
              response=>{
                if(response.data.code===200){
                  this.dialogVisiblepa = false
                  localStorage.clear("nickname")
                  localStorage.clear("email")
                  this.$router.push('/')
                  this.$message({
                type: 'success',
                message: '密码修改成功,请重新登录',
                });
                }else{
                  this.$message.error(response.data.message);
                }
                
              },
              error=>{
                this.$message.error("修改密码失败");
              console.log(error.$message)
              }
            )
          } 
          else {
            this.$message.error("修改密码失败");
          }
        });
      },
    },
}
</script>

<style>

</style>